<template>
	<view class="IdlePurchaseDetail" v-if="data">
		<view class="title" @click="copy(data.name)">【求购】{{data.name}}</view>
		<view class="other">
			<view class="l">{{data.city}}{{data.district}}</view>
			<view class="r">{{data.createtime | date}}</view>
		</view>
		<view class="parse"   @click="copy(data.content)">{{data.content}}</view>
		<view class="covers">
			<image v-for="(item,index) of data.images" class="cover" :src="oss(item)" mode="widthFix"></image>
		</view>
		<!-- 信息 -->
		<view class="info">
			<view class="contact_item flex f-x-b f-y-c mobile">
				<view class="title" v-if="data.exist">联系方式：{{data.mobile}}</view>
				<view class="title" v-else-if="data.mobile">联系方式：{{data.mobile.replace(/(\d{3})\d*(\d{4})/,'$1****$2')}}</view>
				<view class="methods flex f-y-c" v-if="data.exist && data.mobile" @click="tel(data.mobile)">
					<image src="../../static/mobile.png" mode=""></image>
					拨打电话
				</view>
			</view>
			<view class="contact_item flex f-x-b f-y-c">
				<view class="title" v-if="data.exist && data.wechat">微信号：{{data.wechat}}</view>
				<view class="title" v-else-if="data.wechat">微信号：{{data.wechat.replace(/(\d{1})\d*(\d{1})/,'$1****$2')}}</view>
				<view class="methods" v-if="data.exist && data.wechat" @click="copy(data.wechat)">
					复制微信号
				</view>
			</view>
			<w-btn border-radius="39rpx" v-if="!data.exist" @click="buyinfo">消耗积分{{data.see}}查看联系方式</w-btn>
		</view>
		<!-- 积分不足提示 -->
		<u-modal class="t-c" width="476rpx" confirm-color="#3D3D3D" :show="integralShow" title="系统提示" content="当前积分不足" @confirm="integralShow = false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否显示积分不足提示框
				integralShow: false,
				id: '',
				data: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		methods: {
			buyinfo(){
				uni.$u.http.post('/paybuy', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.toast(res.msg)
						this.getDetail()
					}
				}).catch((res) => {})
			},
			tel(mobile){
				//#ifdef MP-WEIXIN
				uni.$u.http.post('/mobilelog',{
					mobile
				}).then(res => {
					if (res.code == 1) {
						uni.makePhoneCall({
							phoneNumber: mobile
						});
					}
				}).catch((res) => {
				
				})
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(mobile, true);
				//#endif
			},
			getDetail(){
				uni.$u.http.post('/getbuyinfo', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.data = res.data
					}
				}).catch((res) => {})
			}
		}
	}
</script>

<style lang="scss">
	.IdlePurchaseDetail {
		padding: 30rpx 38.4rpx 0;

		> .title {
			font-size: 39rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
			margin-bottom: 30rpx;
		}
		
		.other{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l,.r{
				font-size: 24rpx;
				color: #666;
			}
		}

		.parse {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.8);
			line-height: 63rpx;
		}
		.covers{
			.cover{
				width: 100%;
			}
		}

		.info {
			background: #FAFAFA;
			border-radius: 39rpx;
			padding: 37.45rpx 31.54rpx 39.42rpx;
			margin-top: 64rpx;

			.contact_item {
				margin-bottom: 26.61rpx;
				&.mobile {
					image {
						width: 28.53rpx;
						height: 28.56rpx;
					}
				}

				.title {
					font-size: 28rpx;
					font-weight: 700;
					color: #333333;
				}

				.methods {
					font-size: 28rpx;
					font-weight: 500;
					color: #F3AC2D;
				}
			}
			
			.btn {
				margin-top: 41.33rpx;
			}
		}
	}
</style>
